<!doctype html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>crawler-manager-admin</title>
    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" href="/css/gloabl.css" th:href="@{/css/gloabl.css}">
    <script type="text/javascript" src="/layui/layui.js" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" src="/js/gloab.js" th:src="@{/js/gloab.js}"></script>
    <style>
        #app {
            background: #2B4B6B;
            width: 100%;
            height: 100%;
            padding: 0;
        }

        .login-area {
            background: #fff9ec;
            border: solid #eee 1px;
            width: 450px;
            height: 300px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 5px;
        }

        .login-area h2 {
            position: absolute;
            left: 50%;
            transform: translate(-50%, 0);
            padding: 20px 0;
            width: 200px;
        }

        .login-form {
            position: absolute;
            width: 100%;
            margin-top: 75px;
            padding: 0 25px;
            box-sizing: border-box;
        }

        .buttons {
            float: right;
        }

        .beian {
            position: absolute;
            bottom: 1%;
            text-align: center;
            color: #fff9ec;
            left: 50%;
            transform: translate(-50%);
        }

        .beian a {
            color: #eeeeee;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="login-area">
        <h2>V-Talk在线聊天室</h2>
        <div class="login-form">
            <span style="color: red; text-align: center" th:text="${returnCode!=null ? returnMsg : ''}"></span>
            <form class="layui-form" action="/login.do" method="post">
                <div class="layui-form-item">
                    <div class="">
                        <input type="text" name="userId" required lay-verify="required" placeholder="请输入用户ID"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="">
                        <input type="password" name="password" required lay-verify="required" placeholder="请输入密码"
                               autocomplete="off" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="">
                        <input type="checkbox" name="rem" title="记住我(7天内自动登录)" lay-skin="primary">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="buttons">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>

        </div>
    </div>
    <div class="beian">
        <a href="http://www.beian.miit.gov.cn">粤ICP备18032025号</a>
    </div>
</div>

</body>
<script type="text/javascript">
    layui.use('form', function () {
        const form = layui.form;
        const $ = layui.$;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            if (data.field.rem === 'on') {
                data.field.rem = true
            }
            // layer.msg(JSON.stringify(data.field));
            return true;
        });
    });
</script>
</html>